<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="content">
        <div class="box">
            <div class="inner">
                <ul>
                    <li>li_1</li>
                    <li>li_2</li>
                    <li>li_3</li>
                    <li class="act">li_4</li>
                    <li>li_5</li>
                    <li>li_6</li>
                    <li class="act">li_7 <span class="act"></span></li>
                    <li>li_8</li>
                </ul>
            </div>
        </div>
    </div>

    <script src="jquery.min.js"></script>
    <script>
        // eq通过下标获取
        $('li').eq(2).css('color', 'red');
        $('li:eq(0)').css('color', 'red');

        // 查找符合条件的子元素 包括后代的后代
        console.log($('.inner').find('.act'));

        // 除自己以外所有兄弟
        $('li').eq(4).siblings().css('fontSize', '40px');

        // 选择前后的兄弟元素
        $('li').eq(4).prev().css('color', 'orange');
        $('li').eq(4).next().css('color', 'orange');

        // 选择前面或后面所有的兄弟元素
        $('li').eq(4).prevAll().css('backgroundColor', 'lightgreen');
        $('li').eq(4).nextAll().css('backgroundColor', 'lightgreen');

        // parent选取元素父节点   选取所有父节点 parents
        $('ul').parent().css('border', '10px solid #ccc');
        $('ul').parentsUntil('.content').css('padding', '10px');  // 不包括.content  

        // 获取所有孩子节点
        console.log($('ul').children());
    </script>
</body>
</html>